<template>
  <a-modal :visible="show" width="50vw" :title="title" @ok="handleConfirm" @cancel="handleClose" :maskClosable="false"
    :key="show">

    <a-form-model ref="ruleForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="上级关键词" prop="pid">
            <a-tree-select v-model="form.pid" show-search :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="Please select" allow-clear tree-default-expand-all :tree-data="treeData" :replaceFields="{
                children: 'children',
                label: 'keyWord',
                value: 'id',
              }">

            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="类型" prop="category">
            <a-select style="width: 100%" v-model="form.category" :disabled="category >= 1">
              <a-select-option v-for="(item, iindex) in codeMaps['技术库关键字类型']" :key="'reduce' + iindex"
                :value="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="10">
          <a-form-model-item label="是否启用" prop="enable">
            <a-switch :checkedValue="1" :unCheckedValue="0" v-model="form.enable" checked-children="已启用" un-checked-children="未启用" />
          </a-form-model-item>
        </a-col>
        <a-col :span="14">
          <a-form-model-item label="关键词" prop="keyWord">
            <a-input v-model="form.keyWord" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="描述" prop="description">
            <a-input v-model="form.description" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
import Vue from 'vue'
import { getAction, postAction } from '@/api/manage'
import { ACCESS_TOKEN, USER_NAME } from '@/store/mutation-types'
import { postActionAsync } from '../../../api/manage'
export default {
  name: 'SubTechList',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      show: false,
      urls: {
        save: '/techKeyWords/add',
        codes: '/manage/codeInfo/queryByTypes',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      rules: {
        newEquipment: [
          {
            required: true,
            message: '请选择是否新增设备',
            trigger: 'blur',
          },
        ],
        keyWord: [
          {
            required: true,
            message: '请输入关键字',
            trigger: 'change',
          },
          { min: 1, max: 50, message: '关键字不超过50个字', trigger: 'blur' },
        ],
        category: [
          {
            required: true,
            message: '请选择关键字类型',
            trigger: 'change',
          },
        ],
        description: [
          { max: 50, message: '关键字不超过500个字', trigger: 'blur' },
        ],
      },
      title: "",
      treeData: [],
      form: {},
      type: "add",
      category: 1,
      codeMaps: []
    }
  },
  mounted() {
    this.fetchCodes()
  },
  computed: {},
  methods: {
    init(type, category, form, treeData, title) {
      this.type = type
      this.treeData = treeData
      this.title = title
      this.show = true
      this.category = category
      if (this.type == "add") {
        this.form = {};
        this.$set(this.form, "pid", form.id);
        this.$set(this.form, "enable", true);
        this.$set(this.form, "category", this.category);
      } else {
        this.form = form;
      }

    },
    fetchCodes() {
      this.defaultInfos = []
      getAction(this.urls.codes, {
        types:
          '技术库关键字类型'
      }).then((res) => {
        if (res.success) {
          this.codeMaps = res.result
        }
      })
    },
    handleClose() {
      this.show = false
    },
    async handleConfirm() {
      if (!this.form.keyWord) {
        return this.$message.warning("请输入关键字")
      }
      if (!this.form.category) {
        return this.$message.warning("请选择关键字类型")
      }
      if (this.category >= 1) {
        this.$set(this.form, "category", this.category)
      }

      let res = await postAction(this.urls.save, this.form)
      if (res.success) {
        this.$message.success("保存成功")
        this.$emit("success")
        this.show = false
      } else {
        this.$message.error("保存失败" + res.message)
      }
    }
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@import '~@assets/less/hte-main.less';

.page-main {
  .container {
    background-color: white;

    .content-list {
      margin-top: 15px;
    }
  }
}
</style> 